<template>
  <div class="goods-list-page">
    <page-header-wrapper>
      <page-tab-list></page-tab-list>
      <a-card :bordered="false">
        <div class="table-operator" style="display: flex; justify-content: space-between">
          <span></span>
          <div>
            <a-button type="primary" style="margin-right: 8px" @click="refresh">刷新设备列表</a-button>
            <a-button type="primary" @click="onCreate" icon="plus">添加设备</a-button>
          </div>
        </div>
        <DeviceTable @handleEdit="handleEdit"></DeviceTable>
      </a-card>

      <cyyModal
        :visible="visibleEdit"
        :title="form.id == 0 ? '添加设备' : '编辑设备'"
        @handleCancel="visibleEdit = false"
        @handleOk="onEditOk"
      >
        <a-form-model ref="deviceForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="设备名称" prop="name" has-feedback>
            <cyyInput v-model="form.name"></cyyInput>
          </a-form-model-item>
          <a-form-model-item label="设备序列号" prop="serial" has-feedback>
            <cyyInput v-model="form.serial"></cyyInput>
          </a-form-model-item>
          <a-form-model-item label="设备秘钥" prop="code" has-feedback>
            <cyyInput v-model="form.code"></cyyInput>
          </a-form-model-item>
          <a-form-model-item label="图标">
            <!-- 上传图片 -->
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  form.cover_pic = e.data
                }
              "
              @deleteImg="form.cover_pic = ''"
              :imgSrc="form.cover_pic"
            >
            </cyyUploadImg>
          </a-form-model-item>
        </a-form-model>
      </cyyModal>
    </page-header-wrapper>
  </div>
</template>

<script >
import { STable } from '@/components'
import DeviceTable from './components/DeviceTable.vue'
import { cyyModal, cyyInput, cyyUploadImg } from '@/components/CyyUi/index'
import { addDeviceItem, refresh } from '@/api/adopt/device'
const defaultForm = {
  id: 0,
  name: '',
  serial: '',
  code: '',
  cover_pic: '',
}
export default {
  name: 'DeviceList',
  components: {
    STable,
    DeviceTable,
    cyyModal,
    cyyInput,
    cyyUploadImg,
  },
  data() {
    return {
      activeTab: '4',
      tabs: [
        {
          value: '0',
          text: '认养列表',
          path: 'AdoptList',
        },
        {
          value: '1',
          text: '认养分类',
          path: 'AdoptCat',
        },
        {
          value: '2',
          text: '认养订单',
          path: 'AdoptOrderList',
        },
        {
          value: '3',
          text: '认养设置',
          path: 'AdoptSetting',
        },
        {
          value: '4',
          text: '设备管理',
          path: 'DeviceList',
        },
        {
          value: '5',
          text: '配送订单',
          path: 'CostOrderList',
        },
      ],
      currentTab: -1,
      form: Object.assign({}, defaultForm),
      visibleEdit: false,
      rules: {
        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        serial: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
        code: [{ required: true, message: '请输入设备秘钥', trigger: 'blur' }],
      },
    }
  },
  activated() {
    this.$nextTick(() => {
      this.$refs[this.currentTab].$refs.tableList.refresh(true)
    })
  },
  created() {},
  computed: {},
  watch: {
    currentTab(val) {
      this.$nextTick(() => {
        this.refresh()
      })
    },
  },
  methods: {
    // tab切换
    tabChange(e) {
      console.log(e)
      console.log(this.tabs[e])
      if (e == 4) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    onCreate: function () {
      this.form = Object.assign({}, defaultForm)
      this.visibleEdit = true
      console.log(this.visibleEdit)
    },
    onEditOk: function () {
      this.$refs['deviceForm'].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          addDeviceItem({ ...this.form })
            .then((res) => {
              if (res.code == 0) {
                this.visibleEdit = false
                this.$message.success({ content: res.msg })
              } else {
                this.$message.error({ content: res.msg })
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleEdit: function (item) {
      this.form = item
      this.visibleEdit = true
    },
    refresh: function () {
      return refresh().then((res) => {
        this.loading = false
        if (!res.code) {
          this.dataSource = res.data.data
          this.totalCount = res.data.totalCount
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.goods-list-page {
  .ant-space-vertical {
    width: 100%;
  }
  .table-operator {
    margin-bottom: 0;
  }
  .fixPosition {
    display: inline-block;
    transform: translateX(-18px);
    color: transparent;
    cursor: pointer;
  }
  .text_ellipsis {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .table_operator_icon {
    font-size: 18px;
    padding: 0 5px;
    color: rgb(182, 182, 182);
    cursor: pointer;
    &:hover {
      color: rgb(24, 144, 255);
    }
  }
  .permission-form {
    /deep/ .permission-group {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .search-item {
    margin-left: 10px;
  }
  .min_top_height {
    /deep/.ant-card-body {
      padding-top: 10px;
    }
  }
  .notice-box {
    width: 100%;
    height: 40px;
    background: #fefbe6;
    border: 1px solid #ffe58f;
    display: flex;
    align-items: center;
    padding: 0 16px;
    .anticon {
      margin-right: 5px;
    }
  }
}
</style>


